<template>
  <div class="conter">
    <h3>处理理赔订单</h3>
    <div class="box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.state}}</span>
          </template>
        </el-table-column>
        <el-table-column label="理赔凭证" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.img}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保单" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>保单名称: {{ scope.row.ordersId.productsId.name }}</p>
              <p>状态: {{ scope.row.state }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.ordersId.productsId.name}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit( scope.row)">同意</el-button>
            <el-button size="mini" type="danger" @click="handleDelete( scope.row)">不同意</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import api from "../../../network/apis/api";
export default {
  created() {
    this.getAllClaims();
  },
  data() {
    return {
      tableData: [
        {
          img: "",
          ordersId: {
            productsId: {}
          },
          reason: "",
          salesmanId: {},
          startTime: "2020-09-19",
          state: 0,
          _id: "",
        },
      ],
    };
  },
  methods: {
    async handleEdit(row) {
      row.state = 1;
      row.ordersId.state = 5
      const data = await api.claims.changeStatus(row);
      const date  =await api.orders.ChangeOrderToRefound(row.ordersId)
      this.getAllClaims();
      console.log(row.ordersId);
      console.log(row);
    },
    async handleDelete(row) {
      row.state = -1;
      row.ordersId.state = 2
      const data = await api.claims.changeStatus(row);
      const date  = await api.orders.ChangeOrderToRefound(row.ordersId)
      this.getAllClaims();
      console.log(row.ordersId);
    },
    async getAllClaims() {
      const { data } = await api.claims.getAllClaims();
      this.tableData = data.data;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].state == 0) {
          this.tableData[i].state = "待处理";
        } else if (this.tableData[i].state == 1) {
          this.tableData[i].state = "申请成功";
        } else if (this.tableData[i].state == -1) {
          this.tableData[i].state = "申请失败";
        }
      }
    },
  }
};
</script>

<style>
.box {
  width: 80%;
}
.conter {
  text-align: center;
}
</style>